.menu {
    height:100%;
    display:flex;
    flex-direction: column;
    background: #495060;
    .main {
      flex:1;
      overflow:hidden;
    }
  }
.menu-submenu {
    font-size:14px;
    color: hsla(0,0%,100%,.7);
    .submenu-title {
        .ivu-icon:first-child {
            font-size: 16px;
            width: 12px;
            top: 2px;
            position: relative;
            text-align: center;
            line-height: 1;
            margin-right:8px;
        }
       .title-icon{
        float: right;
        position: relative;
        top: 4px;
        transition: transform .2s ease-in-out,-webkit-transform .2s ease-in-out;
      }
    }
    &.open {
      .title-icon{
        transform: rotate(180deg);
      }  
    }
    &.active {
        .submenu-title {
        border-left:2px solid #39f!important;
        }
    }
    &:hover {
        color:#fff;
    }
    .menu-item {
        padding-left:43px;
    }   
    
}
.submenu-box {
    .scrollbar_bar.is-vertical {
        right:2px;
    }
}    
.menu-item {
    padding-left:43px;
    background: #363e4f;
    color: hsla(0,0%,100%,.7);
    list-style:none;
    &.active {
        background: #39f!important;
        color:#fff;
    }
    &:hover {
        color:#fff;
    }
}
.submenu-name {
    background: #363e4f;
    color: #c0c8cd;
    padding:10px 15px;
    font-size:14px;
}
.submenu-title,.menu-item {
    font-size:14px;
    padding: 14px 24px;
    position: relative;
    cursor: pointer;
    z-index: 1;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    white-space: nowrap;
}
